<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>插件</title>
</head>
<body>
国家：<select name="country" id="country"></select>
<hr>
俱乐部：<select name="clue" id="club"></select>
<script>
;(function(){
    function Football(countryId,clubId){
      var self = this
      console.log('self',self)
      this.countryid = document.getElementById(countryId)
      this.clubid = document.getElementById(clubId)
      this.countryid.addEventListener('change',this.selectCountry.bind(this),false)
      this.clubid.addEventListener('change',this.selectClub.bind(this),false)
      this.initFun = function(){
        this.createCountry()
      }
    }
    Football.prototype.createCountry = function(){  //  创建联赛列表
        for(var i=0; i<this.country.length; i++){
            var newOption = document.createElement("option");
            newOption.appendChild(document.createTextNode(this.country[i].name));
            newOption.setAttribute("value",this.country[i].value);
            this.countryid.appendChild(newOption);
        }
    }
    Football.prototype.selectCountry = function(){  // addEventListener事件 this指向的是调用addEventListener的对象
      this.clublist()
    }
    Football.prototype.selectClub = function(){
      console.log('...',this,this.countryid.value)
      console.log('...',this,this.clubid.value)
    }
    Football.prototype.clublist = function(){  // 俱乐部列表
      this.clubid.innerHTML = ''
      for(var i=0; i<this.club.length; i++){
        if(this.countryid.value == this.club[i].country){
          var newOption = document.createElement('option')
          newOption.appendChild(document.createTextNode(this.club[i].name))
          newOption.setAttribute("value",this.club[i].value);
          this.clubid.appendChild(newOption);
        }
      }
      console.log('...',this,this.countryid.value)
      console.log('...',this,this.clubid.value)
    }
    Football.prototype.country = [
        {'name':'意大利','value':'ydl'},
        {'name':'英格兰','value':'ygl'},
        {'name':'德国','value':'dg'},
        {'name':'西班牙','value':'xby'},
    ]
    Football.prototype.club = [
        {'name':'ac米兰','value':'ac','country':'ydl'},
        {'name':'国际米兰','value':'inter','country':'ydl'},
        {'name':'尤文图斯','value':'youwen','country':'ydl'},
        {'name':'利物浦','value':'lwp','country':'ygl'},
        {'name':'曼联','value':'manlian','country':'ygl'},
        {'name':'多特蒙德','value':'duote','country':'dg'},
        {'name':'勒沃库森','value':'lewo','country':'dg'},
        {'name':'巴塞罗那','value':'basa','country':'xby'},
        {'name':'皇家马德里','value':'huangma','country':'xby'},
    ]
    window.Football = Football
}())

var f =  new Football('country','club')
f.initFun()
</script>
</body>
</html>